<template>
  <view style="background-color: #F8F8F8;">
    <view v-for="(item,index) in technicianArr" :key="index" style=" display: flex;justify-content: center;">
      <view class="card">
        <!-- 头像 -->
        <view>
          <view style="display: flex;justify-content: center;">
            <u-avatar :src="item.avatar" size="55"></u-avatar>
          </view>
          <view>
            <view style="width: 130upx;padding-top: 20upx;">
              <view class="status-name">{{item.statusName}}</view>
            </view>
          </view>
        </view>
        <!-- 名字列 -->
        <view style="padding-left: 25upx;">
          <view style="font-weight: bold;font-size: 35upx;">{{item.nickname}}</view>
          <!-- 评分 -->
          <view style="display: flex;align-items: center;padding-top: 20upx;">
            <view><u-icon name="star-fill" color="red"></u-icon></view>
            <view style="color: red;">{{item.score + '.0'}}</view>
          </view>
          <!-- 商家 -->
          <view style="display: flex;padding-top: 20upx;align-items: center;">
            <view>
              <u-icon name="home" color="#808080" size="25"></u-icon>
            </view>
            <view style="color: #808080;font-size: 30upx;">
              {{'商家'}}
            </view>
          </view>
        </view>


        <!-- 生活照列 -->
        <view style="padding-left: 25upx;">
          <view
            style="display: flex;justify-content: center;background-color: #E8FDFF;color: #1AB0BE;width: 120upx;line-height: 50upx;font-weight: bold;font-size: 32upx;align-items: center;">
            {{'生活照'}}
          </view>
          <view style="color: #808080;font-size: 30upx;padding-top: 20upx;" @click="healthyHandle(item.memberId)">
            {{'健康档案'}}
          </view>
          <view style="padding-top: 20upx;display: flex;align-items: center;">
            <view>
              <u-icon name="more-circle" color="#808080" size="22"></u-icon>
            </view>
            <view style="color: #808080;font-size: 20upx;">
              {{item.commentTotal}}
            </view>
          </view>
        </view>

        <!-- 按钮列 -->
        <view style="padding-left: 25upx;display: flex;align-items: center;">
          <view>
            <u-button color="linear-gradient(to right, #119FAF, #41C69E)" shape="circle"
              @click="openPopHandle(item.memberId)">{{'立即预约'}}</u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 弹出列 -->
    <u-popup :show="showPop" @close="closePopHandle"
      style="border-top-left-radius: 30upx;border-top-right-radius: 30upx;">

      <view style="display: flex;justify-content: center;padding-bottom: 30upx;">
        <view class="pop-border">
          <introduce ref="introduce" :member-id="memberId" />
        </view>
      </view>
      <scroll-view scroll-y="true" style="height: 600upx;">
        <view style="display: flex;justify-content: center; ">
          <view>
            <project ref="project" @projectArrHandle="projectArrHandle"></project>
          </view>
        </view>
      </scroll-view>
      <!-- 预约操作 -->
      <view style="display: flex;justify-content: center;">
        <view style="padding: 20upx;display: flex;justify-content: space-between;width: 90%;">
          <view style="display: flex;align-items: center;">
            <view style="color: red;">合计:￥{{totalPrice+'.00'}}</view>
          </view>
          <view style="width: 300upx;">
            <u-button color="linear-gradient(to right, #119FAF, #41C69E)" size="70">{{'立即预约'}}</u-button>
          </view>
        </view>
      </view>
    </u-popup>

  </view>

</template>

<script>
  import {
    getTechnicianList
  } from '../../api/technician.js'
  import introduce from './introduce'
  import project from './project'

  export default {
    components: {
      introduce,
      project
    },
    props: {
      name: {
        type: String,
        default: null
      },
    },
    computed: {
      hasLogin() {
        return this.$store.getters.hasLogin
      },
    },
    mounted() {
      if (!this.hasLogin) {
        uni.$u.route('/pages/login/social')
      } else {
        this.getList(null)
      }

    },
    data() {
      return {
        showPop: false,
        technicianArr: [],
        memberId: undefined,
        queryParams: {
          name: null,
          pageNo: 1,
          pageSize: 20
        },
        totalPrice: 0
      }
    },
    methods: {
      projectArrHandle(projectArr) {
        let total = 0
        projectArr.forEach(item => {
          total += item.number * Number(item.discountPrice)
        })
        this.totalPrice = total
      },
      getList(name) {
        const that = this
        this.queryParams.name = name
        getTechnicianList(this.queryParams).then(res => {
          that.technicianArr = res.data.list
        })
      },
      healthyHandle(id) {
        uni.$u.route('/pages/technician/healthy', {
          id: id
        })
      },
      openPopHandle(memberId) {
        this.$refs.introduce.init(memberId)
        this.showPop = true
      },
      closePopHandle() {
        this.$refs.introduce.instroduce = {}
        this.showPop = false
      }
    }
  }
</script>

<style scoped>
  .status-name {
    border-radius: 50upx;
    line-height: 50upx;
    background: linear-gradient(to right, #119FAF, #41C69E);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25upx;
  }

  .pop-border {
    border-style: solid;
    border-width: 2px;
    border-color: #1AB0BE;
    border-radius: 20upx;
    width: 90%;
    margin-top: 30upx;
  }

  .card {
    display: flex;
    justify-content: space-around;
    padding: 20upx;
    width: 95%;
    margin-bottom: 30upx;
    background-color: #fff;
    border-radius: 20upx;
  }
</style>
